<template>
  <div class="app-container" v-loading.fullscreen.lock="loading">
    <el-card class="box-card">
      <div class="member">
        <div class="member-img">
          <div class="block">
            <el-avatar :size="50" :src="userInfo.avatar"></el-avatar>
          </div>
        </div>
        <div class="member-body">
          <div class="member-title">微信用户</div>
          <div class="member-channels">
            <div>
              <label class="member-channels-label">ID:</label>
              {{ userInfo.sysUserid }}
            </div>
            <div>
              <label class="member-channels-label">来源渠道：</label>
              小程序
            </div>
            <div>
              <label class="member-channels-label">所有登录渠道：</label>
              无
            </div>
          </div>
          <div class="member-info">
            <el-row class="member-info-margin">
              <el-col :span="6" :offset="0">
                真实姓名：{{ userInfo.nickName }}
              </el-col>
              <el-col :span="6" :offset="0">
                性别：{{ userInfo.sex == 0 ? "女" : "男" }}
              </el-col>
              <el-col :span="6" :offset="0">
                <span>手机号：{{ userInfo.phonenumber }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                注册时间：{{ userInfo.createTime }}
              </el-col>
            </el-row>
            <el-row class="member-info-margin">
              <!-- <el-col :span="6" :offset="0">
                最近浏览：-
              </el-col>
              <el-col :span="6" :offset="0">
                公众号：-
              </el-col>
              <el-col :span="6" :offset="0">
                邀请码：-
              </el-col> -->
              <el-col :span="6" :offset="0">
                会员等级：{{ userInfo.memberName }}
                <span v-if="userInfo.memberAgencyLevelName">{{
                  "," + userInfo.memberAgencyLevelName
                }}</span>
                <span
                  ><el-button
                    type="text"
                    size="mini"
                    icon="el-icon-edit"
                    style="color: #000"
                    @click="memberLevelChange"
                  ></el-button>
                </span>
              </el-col>
              <el-col :span="6" :offset="0">
                <span style="margin-right: 10px"
                  >ID:{{ userInfo.parentId }}</span
                >
                <span>推荐人：{{ userInfo.parentName }}</span>

                <span
                  ><el-button
                    type="text"
                    size="mini"
                    icon="el-icon-edit"
                    style="color: #000"
                    @click="recommenderHandler"
                  ></el-button>
                </span>
                <span
                  ><el-button type="text" size="mini" @click="changeDistory"
                    >| 修改记录</el-button
                  ></span
                >
              </el-col>
              <el-col :span="6" :offset="0">
                默认收货地址： <span>{{ userInfo.district }}</span>

                <div style="margin-left: 102px">
                  {{ userInfo.detail || "-" }}
                </div>
              </el-col>
              <el-col :span="6" :offset="0">
                重置支付密码：
                <span
                  ><el-button
                    type="text"
                    size="mini"
                    icon="el-icon-edit"
                    style="color: #000"
                    @click="resetPasswordHandler"
                  ></el-button>
                </span>
              </el-col>
            </el-row>
            <!-- <el-row class="member-info-margin">
              <el-col :span="6" :offset="0">
                修改密码：
              </el-col>
              <el-col :span="6" :offset="0">
                会员过期时间：-
              </el-col>
            </el-row>
            <el-row class="member-info-margin">
              <el-col :span="6" :offset="0">
                登记设备：-
              </el-col>
              <el-col :span="6" :offset="0">
                设备MAC地址：-
              </el-col>
            </el-row> -->
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 30px">
      <div class="assets">
        <div class="assets-title">用户资产</div>
        <div class="assets-line">
          <el-row :gutter="40">
            <el-col :span="12" class="custom-col">
              <el-row
                class="assets-line-top"
                type="flex"
                justify="space-between"
              >
                <el-col :span="12">
                  <label class="assets-top-label">余额</label>
                  <el-button
                    type="text"
                    size="mini"
                    @click="
                      () => {
                        this.rechargeBalanceOpen = true;
                        this.$set(this.balanceForm, 'balance', null);
                      }
                    "
                    >充余额</el-button
                  >
                </el-col>
                <el-col :span="1" style="margin-right: 10px">
                  <el-button
                    type="text"
                    size="mini"
                    @click="detailsHandler('ye')"
                    >查看明细</el-button
                  >
                </el-col>
              </el-row>
              <el-row class="assets-line-body">
                <el-col :span="8">
                  <div class="assets-body-label">可用余额</div>
                  <div class="assets-body-value">
                    {{ userInfo.remainingSum }}
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="assets-body-label">已使用</div>
                  <div class="assets-body-value">
                    {{ userInfo.useRemainingSum }}
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="assets-body-label">已提现</div>
                  <div class="assets-body-value">
                    {{ userInfo.extractRemainingSum }}
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12" class="custom-col">
              <el-row
                class="assets-line-top"
                type="flex"
                justify="space-between"
              >
                <el-col :span="12">
                  <label class="assets-top-label">积分</label>
                  <el-button
                    type="text"
                    size="mini"
                    @click="
                      () => {
                        this.rechargePointsOpen = true;
                        this.$set(this.pointsForm, 'integral', null);
                      }
                    "
                    >充积分</el-button
                  >
                </el-col>
                <el-col :span="1" style="margin-right: 15px">
                  <el-button
                    type="text"
                    size="mini"
                    @click="detailsHandler('jf')"
                    >查看明细</el-button
                  >
                </el-col>
              </el-row>
              <el-row class="assets-line-body">
                <el-col :span="12">
                  <div class="assets-body-label">可用积分</div>
                  <div class="assets-body-value">
                    {{ userInfo.creditScore }}
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="assets-body-label">已使用积分</div>
                  <div class="assets-body-value">
                    {{ userInfo.useCreditScore }}
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <div class="assets-line">
          <el-row :gutter="40">
            <el-col :span="12" class="custom-col">
              <el-row
                class="assets-line-top"
                type="flex"
                justify="space-between"
              >
                <el-col :span="12">
                  <label class="assets-top-label">佣金</label>
                </el-col>
                <el-col :span="1" style="margin-right: 10px">
                  <el-button
                    type="text"
                    size="mini"
                    @click="detailsHandler('yj')"
                    >查看明细</el-button
                  >
                </el-col>
              </el-row>
              <el-row class="assets-line-body">
                <el-col :span="8">
                  <div class="assets-body-label">当前佣金</div>
                  <div class="assets-body-value">{{ userInfo.earnings }}</div>
                </el-col>
                <el-col :span="8">
                  <div class="assets-body-label">待结算</div>
                  <div class="assets-body-value">
                    {{ userInfo.staySettleEarnings }}
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="assets-body-label">已提现</div>
                  <div class="assets-body-value">
                    {{ userInfo.extractEarnings }}
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <!-- <el-col :span="12">
              <el-row class="assets-line-top" type="flex" justify="space-between">
                <el-col :span="12">
                  <label class="assets-top-label">红包</label>
                  <el-button type="text" size="mini">充红包</el-button>
                </el-col>
                <el-col :span="1" style="margin-right: 10px;">
                  <el-button type="text" size="mini">查看明细</el-button>
                </el-col>
              </el-row>
              <el-row class="assets-line-body">
                <el-col :span="6">
                  <div class="assets-body-label">当前可用激活红包</div>
                  <div class="assets-body-value">0.30</div>
                </el-col>
                <el-col :span="6">
                  <div class="assets-body-label">可用冻结红包</div>
                  <div class="assets-body-value">498.70</div>
                </el-col>
                <el-col :span="6">
                  <div class="assets-body-label">已使用激活红包</div>
                  <div class="assets-body-value">0.00</div>
                </el-col>
                <el-col :span="6">
                  <div class="assets-body-label">已使用冻结红包</div>
                  <div class="assets-body-value">0.00</div>
                </el-col>
              </el-row>
            </el-col> -->
          </el-row>
        </div>
        <!-- <div class="assets-line">
          <el-row :gutter="40">
            <el-col :span="12">
              <el-row class="assets-line-top" type="flex" justify="space-between">
                <el-col :span="12">
                  <label class="assets-top-label">优惠券</label>
                </el-col>
                <el-col :span="1" style="margin-right: 10px;">
                  <el-button type="text" size="mini">查看明细</el-button>
                </el-col>
              </el-row>
              <el-row class="assets-line-body">
                <el-col :span="8">
                  <div class="assets-body-label">可使用</div>
                  <div class="assets-body-value">0.30</div>
                </el-col>
                <el-col :span="8">
                  <div class="assets-body-label">已使用</div>
                  <div class="assets-body-value">498.70</div>
                </el-col>
                <el-col :span="8">
                  <div class="assets-body-label">已过期</div>
                  <div class="assets-body-value">0.00</div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
            </el-col>
          </el-row>
        </div> -->
      </div>
    </el-card>

    <!-- 更换推荐人 -->
    <el-dialog title="更换推荐人" :visible.sync="recommenderOpen" width="800px">
      <change-recommender @selectUser="selectUser"></change-recommender>
      <div slot="footer">
        <el-row :gutter="10">
          <el-col :span="2" :offset="19"
            ><el-button @click="recommenderOpen = false"
              >取消</el-button
            ></el-col
          >
          <el-col :span="3" :offset="0"
            ><el-button type="primary" @click="recommenderEdit"
              >确认</el-button
            ></el-col
          >
          <!-- <el-col :span="4" :offset="0"><el-button type="primary"
              @click="modifiedIntoPlatform">修改成平台</el-button></el-col> -->
        </el-row>
      </div>
    </el-dialog>

    <!-- 推荐人修改记录 -->
    <el-dialog
      title="修改记录"
      :visible.sync="modifiedRecordOpen"
      width="800px"
    >
      <modified-record :userId="userInfo.sysUserid"></modified-record>
    </el-dialog>

    <!-- 修改会员等级 -->
    <el-dialog
      title="修改会员等级"
      :visible.sync="memberLevelOpen"
      width="800px"
    >
      <el-form
        :model="memberForm"
        ref="memberForm"
        :rules="memberRules"
        label-width="80px"
      >
        <el-form-item label="等级名称">
          <el-select
            v-model="memberForm.level"
            placeholder="请选择等级名称"
            clearable
          >
            <el-option
              v-for="item in dict.type.member_all_level"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="memberLevelOpen = false">取消</el-button>
        <el-button type="primary" @click="memberLevelEmit">确认</el-button>
      </span>
    </el-dialog>

    <!-- 重置密码 -->
    <el-dialog title="重置密码" :visible.sync="resetPasswordOpen" width="500px">
      <el-form
        :model="passwordForm"
        ref="form"
        :rules="passwordRules"
        label-width="80px"
      >
        <el-form-item label="密码">
          <el-input
            v-model="passwordForm.password"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input
            v-model="passwordForm.password"
            placeholder="请输入确认密码"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="resetPasswordOpen = false">取消</el-button>
        <el-button type="primary" @click="resetPasswordOpen = false"
          >确认</el-button
        >
      </span>
    </el-dialog>

    <!-- 充值余额 -->
    <el-dialog
      title="充值余额"
      :visible.sync="rechargeBalanceOpen"
      width="500px"
    >
      <el-form
        :model="balanceForm"
        ref="balanceForm"
        :rules="balanceRules"
        label-width="80px"
      >
        <el-form-item label="余额数量" prop="balance">
          <el-input
            v-model="balanceForm.balance"
            placeholder="请输入要加/减的余额（-1代表减1余额）"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="备注">
          <el-input v-model="balanceForm.remark"></el-input>
        </el-form-item> -->
      </el-form>
      <span slot="footer">
        <el-button @click="rechargeBalanceOpen = false">取消</el-button>
        <el-button type="primary" @click="balanceSubmit">确定</el-button>
      </span>
    </el-dialog>

    <!-- 充值积分 -->
    <el-dialog
      title="充值积分"
      :visible.sync="rechargePointsOpen"
      width="500px"
    >
      <el-form
        :model="pointsForm"
        ref="pointsForm"
        :rules="pointsRules"
        label-width="80px"
      >
        <el-form-item label="积分数量" prop="integral">
          <el-input
            v-model="pointsForm.integral"
            placeholder="请输入要加/减的余额（-1代表减1余额）"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="pointsForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="rechargePointsOpen = false">取消</el-button>
        <el-button type="primary" @click="pointsSubmit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getInfo,
  putReferrer,
  modifyBalance,
  modifyIntegral,
  putPaymentCode,
  changeMembershipLevel,
} from "@/api/system/member/memberDetail";
import ChangeRecommender from "./components/changeRecommender.vue";
import ModifiedRecord from "./components/modifiedRecord.vue";
export default {
  name: "MemberDetail",
  components: {
    ChangeRecommender,
    ModifiedRecord,
  },
  dicts: ["member_all_level"],
  props: {
    userId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      userInfo: {},
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      recommenderOpen: false,
      modifiedRecordOpen: false,
      memberLevelOpen: false,
      memberForm: {},
      memberRules: {},
      resetPasswordOpen: false,
      passwordForm: {},
      passwordRules: {},
      rechargeBalanceOpen: false,
      balanceForm: {},
      balanceRules: {
        // balance: {
        //   required: true,
        //   message: "余额数量不能为空",
        //   trigger: "blur",
        // },
        balance: [
          { required: true, message: "余额调整不能为空", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              // 校验规则：必须是数字，且可以处理负数
              if (value === "" || value === null || value === undefined) {
                callback(new Error("请输入余额调整值"));
              } else if (!/^-?\d+(\.\d+)?$/.test(value)) {
                callback(new Error("余额调整值必须是数字"));
              } else {
                callback(); // 校验通过
              }
            },
            trigger: "blur",
          },
        ],
      },
      rechargePointsOpen: false,
      pointsForm: {},
      pointsRules: {
        integral: {
          required: true,
          message: "积分数量不能为空",
          trigger: "blur",
        },
      },
      loading: false,
      selectUserInfo: null,
    };
  },
  mounted() {
    this.getMemberDetail();
  },
  methods: {
    /**查询会员详情 */
    getMemberDetail() {
      this.loading = true;
      getInfo({ sysUserid: this.$route.query.userId }).then((res) => {
        this.loading = false;
        this.userInfo = res.data;
      });
    },
    // 更换推荐人
    recommenderHandler() {
      this.recommenderOpen = true;
    },
    // 推荐人历史记录
    changeDistory() {
      this.modifiedRecordOpen = true;
    },
    // 确认更换推荐人
    recommenderEdit() {
      this.$alert(
        '<i class="el-icon-warning" style="color: #e6a23c;margin: 0 10px 0 0;"></i>是否修改推荐人？',
        "警告",
        {
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          dangerouslyUseHTMLString: true,
        }
      )
        .then(({ value }) => {
          let data = {
            sysUserid: this.userInfo.sysUserid,
            parentId: this.userInfo.parentId,
            parentName: this.userInfo.parentName,
            newParentId: this.selectUserInfo.userId,
            newParentName: this.selectUserInfo.nickName,
          };
          putReferrer(data).then((res) => {
            this.$message({
              type: "success",
              message: "修改成功",
            });
            this.recommenderOpen = false;
            this.getMemberDetail();
          });
        })
        .catch(() => {
          this.$message({
            message: "请选择推荐人",
            type: "warning",
          });
        });
    },
    // 修改成平台
    modifiedIntoPlatform() {
      this.$alert(
        '<i class="el-icon-warning" style="color: #e6a23c;margin: 0 10px 0 0;"></i>是否把推荐人修改成平台？',
        "警告",
        {
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          dangerouslyUseHTMLString: true,
        }
      )
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "你的邮箱是: " + value,
          });
        })
        .catch(() => {});
    },
    detailsHandler(type) {
      let url = null;
      switch (type) {
        case "ye":
          url = "/assets/balance/index";
          break;
        case "jf":
          url = "/assets/integration/index";
          break;
        case "yj":
          url = "/assets/commission/index";
          break;
      }
      this.$router.push(url + `?userId=${this.userInfo.sysUserid}`);
    },
    memberLevelChange() {
      this.memberLevelOpen = true;
      this.memberForm = {
        userId: this.userInfo.sysUserid,
        level: this.userInfo.memberLevel ? this.userInfo.memberLevel + "" : "",
      };
    },
    memberLevelEmit() {
      changeMembershipLevel(this.memberForm).then((res) => {
        this.$message.success("修改成功");
        this.memberLevelOpen = false;
        this.getMemberDetail();
      });
    },
    selectUser(v) {
      this.selectUserInfo = v[0];
    },
    resetPasswordHandler() {
      this.$alert(
        '<i class="el-icon-warning" style="color: #e6a23c;margin: 0 10px 0 0;"></i>是否重置支付密码',
        "警告",
        {
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          dangerouslyUseHTMLString: true,
        }
      )
        .then(({ value }) => {
          putPaymentCode({ userId: this.userInfo.sysUserid }).then((res) => {
            this.$message.success("密码重置成功");
          });
        })
        .catch(() => {});
    },
    balanceSubmit() {
      this.$refs["balanceForm"].validate((v) => {
        if (v) {
          this.balanceForm.userId = this.userInfo.sysUserid;
          modifyBalance(this.balanceForm).then((res) => {
            this.rechargeBalanceOpen = false;
            this.$message.success("余额修改成功");
            this.getMemberDetail();
          });
        }
      });
    },
    pointsSubmit() {
      this.$refs["pointsForm"].validate((v) => {
        if (v) {
          this.pointsForm.userId = this.userInfo.sysUserid;
          modifyIntegral(this.pointsForm).then((res) => {
            this.rechargePointsOpen = false;
            this.$message.success("积分修改成功");
            this.getMemberDetail();
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.member {
  display: flex;
  font-size: 14px;

  .member-img {
    padding-right: 20px;
  }

  .member-body {
    flex: 1;

    .member-title {
      font-size: 18px;
    }

    .member-channels {
      display: flex;
      align-items: center;
      margin: 10px 0;
      font-size: 13px;

      .member-channels-label {
        color: #999;
        font-size: 12px;
        opacity: 0.7;
      }

      & div:nth-child(1),
      & div:nth-child(2) {
        margin-right: 30px;
      }
    }

    .member-info {
      .member-info-margin {
        margin: 20px 0;
      }
    }
  }
}

.assets {
  .assets-title {
    height: 25px;
    font-size: 15px;
    display: flex;
    align-items: center;

    &::before {
      content: " ";
      display: inline-block;
      height: 25px;
      width: 3px;
      background-color: #1479f0;
      margin-right: 10px;
    }
  }

  .assets-line {
    // margin-top: 20px;

    .assets-line-top {
      margin-bottom: 10px;
      font-size: 12px;

      .assets-top-label {
        font-size: 16px;
        font-weight: 400;
        margin-right: 15px;
      }
    }

    .assets-line-body {
      padding: 20px 30px;
      background-color: #eeeded;

      min-width: 600px;

      .assets-body-label {
        font-size: 13px;
        margin-bottom: 10px;
      }

      .assets-body-value {
        font-size: 20px;
      }
    }
  }
}

.dialog-icon {
  width: 10px;
  height: 10px;
  color: #e6a23c;
  margin-right: 10px;
}

.custom-col {
  min-width: 600px;
  margin-top: 20px;
}

@media (max-width: 600px) {
  .custom-col {
    min-width: 100%; /* 在小屏幕上占满整行 */
  }
}
</style>
